#{extends 'main.html'/}
<style>
	<!--
	#menu li{width: 190px;}
	-->
</style>
<div class="l-clear"></div>
<div id="maingrid" style="margin-top:1px"></div> <br />
<div style="display:none;"></div>
<div id="detail" style="display:none;"><form id="mainform" method="post"></form></div>
<div id="roelMenu" style="display: none;">
	<form method="post" id="rolemenuform" class="l-form" style="width: 100%;">
		<input type="hidden" name="roleId" id="roleId" value="">
		<input type="hidden" name="menuIds" id="menuId"/>
		<ul id="menu" style="width: 100%;"></ul>
	</form>
</div>
    
<script type="text/javascript">
    var manager;
    var grid;
    var mainform;
    var detailWin = null;
    var curentData = null;
    var currentIsAddNew = null;
    
    $(function () {
	    mainform = $("#mainform");

        function f_initGrid() 
        {
         	grid = $("#maingrid").ligerGrid({
         		
                columns: [
          	            { display: '', name: 'id', width: 5,hide:true},
          	            { display:'',name:'menuIds',width: 5,hide:true},
          	            { display: '名称', name: 'name', width: 100, type: 'string',align:"left" },
          	            { display: '描述', name: 'remark', width: 120, type: 'string',align:"left"},
                          { display: '操作', isSort: false, width: 120, render:
                          	function (rowdata, rowindex, value){
          	                    var h = "";
          	                    if (!rowdata._editing)
          	                    {
          	                        h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
          	                        h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> ";
          	                        h += "<a href='javascript:editMenu(" + rowindex + ")'>绑定菜单</a> "; 
          	                    }
          	                    return h;
          	                }
          	            }
                      ],
                      url: "/role/json", 
                      method: "GET", 
                      usePager:false,
                      width: '100%',
					  toolbar: { items: [
                			{ text: '增加', click: addRow, icon: 'add' }
                	] }
        	});         	
        }
        
        //初始化角色表格
        f_initGrid();
	})
	
	//角色管理
	function addRow()
    {
    	showDetail({}, false);
    }
        
    function beginEdit()
    {
        var selected = grid.getSelected();
        if (!selected) { LG.tip('请选择行!'); return }
        showDetail(selected,false);
    }
        
    function deleteRow(rowid) {
     	var row = grid.getSelectedRow();
     	f_delete({
     		selected:row,
     		url:"/role/del?id=",
     		grid:grid
     	});
     }
	    
	function showDetail(data, isAddNew){
		currentData = data;
		currentIsAddNew = isAddNew;
		fromClear("mainform");
		if (detailWin){
           detailWin.show(); 
        }else{
           	//创建表单结构
           	mainform.ligerForm({
	       		inputWidth: 280,
	        	fields: [
	      			{ name: "role.id", type: "hidden" },
	      			{ display: "角色名称", name: "role.name", newline: true, 
	      			  labelWidth: 100, width: 220, space: 30, type: "text", 
	      			  validate: { required: true, maxlength: 50} },
	      			{ display: "备注", name: "role.remark", newline: true, 
	             		labelWidth: 100, width: 220, space: 30, type: "text" }
	           ], 
	           toJSON: JSON2.stringify
	        });            
	
	        detailWin = $.ligerDialog.open({
	               target: $("#detail"),
	               width: 450, height: 180, top:80,
	               buttons: [
	               { text: '确定', onclick: function () { $("#mainform").submit(); } },
	               { text: '取消', onclick: function () { detailWin.hide(); } }
	               ]
	           });
	       }
       
	       if (currentData) {    	  
	              $("[name$=id]").val(currentData.id)
	              $("[name$=name]").val(currentData.name);
	              $("[name$=remark]").val(currentData.remark);  
	       }
       
	       formSumit({
	   		  formId : "mainform",
	   		  url :'/role/save',
	   		  grid:grid,
	   		  dialog :detailWin,
	   		  sumitSuccess :null,
	   		  beforeSubmit : null
	   	  });

     }
	
	//一下是角色绑定菜单功能
	
	var rolemenuWin,selectTree;
	
    //绑定菜单入口
    function editMenu(){
    	var selected = grid.getSelected();
    	showRoleMenu(selected);
    }
    
    //绑定菜单 弹出框
	function showRoleMenu(data) {
		var roleId = data.id;
        $("#roleId").val(roleId);
    	$("#menu").empty();
    	//selectMenuTree(roleId);
        //创建表单结构
        rolemenuWin = $.ligerDialog.open({
              target: $("#roelMenu"),
              width:430, height: 350, top:5,
              title : "绑定菜单",
              buttons: [
              	{ text: '确定', onclick: save },
              	{ text: '取消', onclick: function () { rolemenuWin.hide(); } }
              ]
         });
        selectTree = $("#menu").ligerTree({
			url : '/rolemenu/treemenu?roleId='+roleId,
			slide : true,
			checkbox : true,
			nodeWidth : 200,
			textFieldName : 'text',
			attribute : [ 'text', 'id' ],
			onCheck : function(node) {
				
			},
			onError : function() {
				$("#menu").text("功能加载失败！");
			},
			onSuccess : function() {
				
			}
		});
        
        function save(){
        	jointMenuId();
			$.ajax({
	             loading: '正在保存数据中...',
	             type: 'POST',
	             url: "/rolemenu/save",                  
	             data: $("#rolemenuform").serialize(),
	             success: function ()
	             {
	            	 rolemenuWin.hide();
	                 LG.tip('保存成功!');
	             },
	             error: function (message)
	             {
	                 LG.tip("保存失败！");
	             }
			});
		}
	}
    
    var ns;
    //角色帮顶菜单，提交拼接选中菜单id
    function jointMenuId(){
        var menuIds="";
    	$("#menuId").val("");
    	ns = selectTree.getChecked();
     	for(var i = 0;i < ns.length; i++){
    		menuIds+=ns[i].data.id+",";
    	}
     	$("#menuId").val(menuIds);
    }
	
</script>